<route lang="json5" type="pbRecord">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '账户资金明细',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false,
    onReachBottomDistance:100,
  },

}
</route>

<script setup lang="ts">
import type { LoadMoreState } from 'wot-design-uni/components/wd-loadmore/types'
import dayjs from 'dayjs'
import { ref } from 'vue'

const timmer = ref<any>([dayjs().startOf('year').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])
function handleConfirm() {
  timmer.value = [dayjs(timmer.value[0]).format('YYYY-MM-DD'), dayjs(timmer.value[1]).format('YYYY-MM-DD')]
}
const dataList = ref([]) // 列表数据
const total = ref(50) // 总条数
const loadState = ref<LoadMoreState>('loading') // 加载状态
function loadMore() {
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}

onReachBottom(() => {
  // 触底加载更多数据
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})

onLoad(() => {
  // 初始化加载数据
  loadMore()
})

function handleTime(type: string) {
  switch (type) {
    case 'lastMonth':
      timmer.value = [dayjs().subtract(1, 'month').startOf('month').format('YYYY-MM-DD'), dayjs().subtract(1, 'month').endOf('month').format('YYYY-MM-DD')]
      break
    case 'yesterday':
      timmer.value = [dayjs().subtract(1, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')]
      break
    case 'today':
      timmer.value = [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
      break
    case 'thisMonth':
      timmer.value = [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
      break
    // case 'thisYear':
    //   timmer.value = [dayjs().startOf('year').format('YYYY-MM-DD'), dayjs().endOf('year').format('YYYY-MM-DD')]
    //   break
  }
}
const showDetail = ref(false)
function handleClose() {
  showDetail.value = false
}
</script>

<template>
  <view class="wot-list-top-wrap">
    <view class="tag-list">
      <view class="quickSelect">
        <wd-button :round="false" size="small" custom-class="btn-tag" @click="handleTime('lastMonth')">
          上月
        </wd-button>
        <wd-button :round="false" size="small" custom-class="btn-tag" @click="handleTime('yesterday')">
          昨天
        </wd-button>
        <wd-button :round="false" size="small" custom-class="btn-tag" @click="handleTime('today')">
          今天
        </wd-button>
        <wd-button :round="false" size="small" custom-class="btn-tag" @click="handleTime('thisMonth')">
          本月
        </wd-button>
        <wd-calendar v-model="timmer" type="daterange" :max-date="dayjs().valueOf()" @confirm="handleConfirm">
          <wd-button :round="false" size="small" custom-class="btn-tag">
            自定义＞
          </wd-button>
        </wd-calendar>
      </view>
      <view class="timmer">
        查询时间 :{{ timmer[0] }} 至 {{ timmer[1] }}
      </view>
    </view>
  </view>
  <view v-if="dataList.length === 0" class="pt-20">
    <wd-status-tip image="content" tip="暂无内容" />
  </view>
  <view v-else class="wot-list pb-safe">
    <view v-for="(item, index) in dataList" :key="index" class="wot-row" @click="showDetail = true">
      <view class="content">
        <view class="left">
          <view>派币服务费</view>
          <view>2025-08-28 10:48:32</view>
        </view>
        <view class="right">
          <view class="text-bold text-#20b958">
            ￥-536{{ index }}
          </view>
          <view>
            余额：￥3000.00
          </view>
        </view>
      </view>
      <wd-icon name="arrow-right" size="36rpx" color="#999" />
    </view>
    <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
  </view>
  <wd-popup v-model="showDetail" lock-scroll closable position="bottom" :safe-area-inset-bottom="true" custom-style="border-radius: 32rpx 32rpx 0 0;" @close="handleClose">
    <view class="wot-form-title">
      【 详情 】
    </view>
    <view class="detail-content">
      <view class="detail-item">
        <view class="d-label">
          类型：
        </view>
        <view class="d-value">
          派币服务费
        </view>
      </view>
      <view class="detail-item">
        <view class="d-label">
          交易金额：
        </view>
        <view class="d-value">
          ￥-536
        </view>
      </view>
      <view class="detail-item">
        <view class="d-label">
          余额：
        </view>
        <view class="d-value">
          ￥3000.00
        </view>
      </view>
      <view class="detail-item">
        <view class="d-label">
          交易号：
        </view>
        <view class="d-value">
          78151762760302
        </view>
      </view>
      <view class="detail-item">
        <view class="d-label">
          时间：
        </view>
        <view class="d-value">
          2025-08-28 10:48:32
        </view>
      </view>
      <view class="detail-item">
        <view class="d-label">
          备注：
        </view>
        <view class="d-value">
          游戏分兑换游戏币
        </view>
      </view>
    </view>
  </wd-popup>
</template>

<style scoped lang="scss">
.tag-list {
  background-color: #ffffff;
  /* margin: 10rpx; 直接涉及到外部边框不要用margin */
  border-radius: 10rpx;
  color: #2A90FF;
  padding: 20rpx 0;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  .quickSelect{
        display: flex;
        justify-content: center;
        :deep() {
            .btn-tag {
                margin: 0 10rpx;
            }
        }
    }
    .timmer{
        text-align: center;
        padding: 10rpx 0;
        font-size: 28rpx;
        color: $uni-text-primary;
    }
}

.wot-row{
  padding: 20rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .content{
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 60rpx;
    .left{
      text-align: left;
    }
    .right{
      text-align: right;
    }
  }
}

.blue {
    color: #2A90FF;
  }
  .total {
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0;
  }
.detail-content{
  padding: 0 40rpx;
  .detail-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10rpx 0;
    .d-label{
      width: 200rpx;
      text-align: right;
      margin-right: 20rpx;
    }
    .d-value{
      flex: 1;
      text-align: left;
    }
  }
}
</style>
